<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        /* 设置body元素的背景图片 */
        body {
            background-image: url('pic/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        tr,td{
            border: 1px solid black;
        }
    </style>
</head>
<body id="app">
<h3 style="text-align: center">我的订单列表</h3>
<table style="width: 1400px;border: 1px solid black" cellpadding="0">
    <tr>
        <td>编号</td>
        <td>用户</td>
        <td>食品</td>
        <td>图片</td>
        <td>数量</td>
        <td>价格</td>
        <td>下单时间</td>
        <td>取材时间</td>
        <td>是否打包</td>
        <td>电话</td>
        <td>地址</td>
        <td>支付方法</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    <tr v-for="orders in this.ordersList">
        <td v-text="orders.id"></td>
        <td v-text="orders.clients.name"></td>
        <td v-text="orders.foods.name"></td>
        <td>
            <img v-bind:src="orders.foods.pic" width="80" height="100">
        </td>
        <td v-text="orders.num"></td>
        <td v-text="orders.price"></td>
        <td v-text="orders.createTime"></td>
        <td v-text="orders.takeTime"></td>
        <td >
            <span v-if="orders.isPack==0">堂食</span>
            <span v-if="orders.isPack==1">打包</span>
        </td>
        <td v-text="orders.phone"></td>
        <td v-text="orders.address"></td>
        <td>
            <span v-if="orders.payMethod==1">现金</span>
            <span v-if="orders.payMethod==2">支付宝</span>
            <span v-if="orders.payMethod==3">微信</span>
        </td>
        <td>
            <span v-if="orders.payMethod==1">未制作</span>
            <span v-if="orders.payMethod==2">制作完成</span>
        </td>
        <td>
            <button>取消订单</button>
            <button>催单</button>
        </td>
    </tr>
</table>
</body>
<script>
    //定义vue对象
    const app = {
        //属性
        data() {
            return {
                //显示的订单
                ordersList: [],
            }
        },
        //行为
        methods:{
            //按编号获取食品
            getOrdersByClientsId:function (){
                console.log(window.location.search)
                axios({
                    method: "post", url: "/getOrdersByClientsId", data: {}
                }).then((response) => {
                    this.ordersList=response.data
                    console.log(this.ordersList)
                });
            },
        },
        //初始化
        mounted(){
            console.log("页面加载成功！")
            this.getOrdersByClientsId()
        }
    }

    //启动vue
    Vue.createApp(app).mount("#app")
</script>
</html>